<!-- 文件所有权归北京优博泰克 -->
<!-- 重置密码弹窗 -->
<template>
    <div>
        <div class="loginBox" v-loading="loading" element-loading-text="提交中"
            element-loading-background="rgba(255, 255, 255, 1)">
            <div class="leftBox">
                <p>重置密码</p>
            </div>
            <div class="rightBox">
                <el-form :model="loginForm" status-icon :rules="rules" ref="fromInstance" label-width="1px"
                    class="demo-ruleForm" label-position="left">
                    <p class="oyjory">新密码</p>
                    <el-form-item label="" prop="newpwd">
                        <el-input show-password type="password" style='width:440px;height: 44px;'
                            v-model="loginForm.newpwd" placeholder="请输入新密码">
                        </el-input>
                    </el-form-item>
                    <div style="height: 10px"></div>
                    <p class="oyjory">确认密码</p>
                    <el-form-item label="" prop="confirepwd">
                        <el-input show-password type="password" v-model="loginForm.confirepwd"
                            placeholder="请再次输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="loginbtn" @click="userProfilelist('ruleForm')">确认</div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <p class="companyCopyright">本系统兼容IE9,IE10,Chrome,FireFox浏览器，为了浏览达到最佳效果，建议使用以上指定浏览器。</p>
    </div>
</template>
<script setup>
import { reactive, toRefs, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import api from '@/api'

let emits = defineEmits(['chageactive'])

let fromInstance = ref(null)

let state = reactive({
    selectRemember: 0,
    loading: false,
    loginForm: {
        newpwd: '',
        confirepwd: '',
    },
    rules: {
        newpwd: [{
            validator: validatePass,
            required: true,
            trigger: 'change'
        }],
        confirepwd: [{
            validator: validatePass2,
            required: true,
            trigger: 'change'
        }],
    }
})
let { selectRemember, loading, loginForm, rules } = toRefs(state)

let validatePass = (rule, value, callback) => {
    if ((!checkStrong(value))) {
        callback(new Error('密码需要包含特殊符号、英文字母、数字、不低于10位'));
    } else {
        if (checkStrong(state.loginForm.confirepwd)) {
            fromInstance.value.validateField('confirepwd')
            callback();
        } else {
            // callback(new Error('密码需要包含特殊符号、英文字母、数字、不低于10位'));
        }
    }
}

let validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'));
    } else if (value !== state.loginForm.newpwd) {
        callback(new Error('两次输入密码不一致!'));
    } else {
        callback();
    }
}

//密码强校验
let checkStrong = (sValue) => {
    //(包含特殊符号、英文字母、数字、不低于10位)
    var modes = 0;
    //正则表达式验证符合要求的
    if (sValue.length < 1) return modes;
    if (/\d/.test(sValue)) modes++; //数字
    if (/[a-z]/.test(sValue)) modes++; //小写
    if (/[A-Z]/.test(sValue)) modes++; //大写
    if (/\W/.test(sValue)) modes++; //特殊字符

    let flag = false
    if (sValue.length >= 10 && (/\d/.test(sValue)) && (/[a-z]/.test(sValue)) && (/\W/
        .test(sValue))) {
        flag = true
    }
    return flag
}

//修改密码
let userProfilelist = () => {
    fromInstance.value.validate(async (valid) => {
        if (!valid) return

        state.loading = true
        let params = {}
        params.code = this.$parent.$data.code
        params.password = state.loginForm.newpwd
        let res = await api.changeaxiosdata('modifyUserPassword', 'post', params)
        if (res) {
            state.loading = false
            ElMessageBox.confirm('密码已经重置成功，请登录。', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
            }).then(() => {
                emits('chageactive', 1)
            }).catch(() => {
                emits('chageactive', 1)
            })
        }
    })
}
</script>
<style scoped>
p {
    margin: 0;
    padding: 0;
}

.loginBox {
    z-index: 1;
    /* width: 440px;
    height: 340px; */
    background: rgba(255, 255, 255, 1);
    box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.5);
    padding: 30px 20px;
}

.leftBox {
    display: flex;
    justify-content: space-between;
    color: #1F2D3D;
    font-size: 24px;
    font-weight: 500;
    line-height: 33px;
}


.rightBox {
    margin-top: 20px;
}

.oyjory {
    color: #8492A6;
    font-size: 18px;
    margin-bottom: 10px;
}


.loginbtn {
    width: 440px;
    height: 44px;
    background: rgba(1, 101, 180, 1);
    border-radius: 4px;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    line-height: 44px;
    margin-top: 30px;
    margin-bottom: 10px;
}

.el-form-item {
    margin-bottom: 10px;
}

.companyCopyright {
    bottom: 300px;
    color: #ffffff;
    width: 400px;
    font-size: 14px;
    margin-top: 20px;
    /*text-align: center;*/
    margin-left: 40px;
}
</style>
